<script setup lang="ts">
import noFooterCard from "@/components/noFooter-card.vue";
import {reactive, ref} from 'vue'
import type {ComponentSize, FormInstance, FormRules} from 'element-plus'

interface RuleForm {
  user: string
  password: string
  region: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  user: '',
  password: '',
  region: '',
})


const rules = reactive<FormRules<RuleForm>>({
  user: [
    {required: true, message: '请输入你的账号', trigger: 'blur'},
    {min: 3, max: 5, message: '字符长度在 3 到 5 个之间', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入你的密码', trigger: 'blur'},
    {min: 3, max: 5, message: '字符长度在 3 到 15 个之间', trigger: 'blur'},
  ],
  region: [
    {
      required: true,
      message: '请选择一个用户组',
      trigger: 'change',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>

<template>
  <div class="account-add">
    <no-footer-card>
      <template #title><h2>添加账户</h2></template>
      <template #content>
        <el-form
            ref="ruleFormRef"
            style="max-width: 300px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
          <el-form-item label="账号" prop="user" size="large">
            <el-input v-model="ruleForm.user"/>
          </el-form-item>
          <el-form-item label="密码" prop="password" size="large">
            <el-input v-model="ruleForm.password"/>
          </el-form-item>
          <el-form-item label="用户组" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择用户组" size="large">
              <el-option label="超级管理员" value="shanghai"/>
              <el-option label="普通用户" value="beijing"/>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-top: 30px">
            <el-button type="primary" @click="submitForm(ruleFormRef)" size="large">
              添加
            </el-button>
            <el-button @click="resetForm(ruleFormRef)" size="large">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
    </no-footer-card>
  </div>
</template>

<style scoped>

</style>